<template>
    <div>
        <a href='/AddView'>新增</a><br>
        用户名<input type="text" v-model="qag.name">
        <input type="button" value="查询" @click="Show">
        <table>
            <thead>
                <tr>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>年龄</td>
                    <td>性别</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{ m. name}}</td>
                    <td>{{ m. pwd}}</td>
                    <td>{{ m. age}}</td>
                    <td>{{ m.sex }}</td>
                    <td><img :src="'https://localhost:7087'+m.img" alt="" style="width: 80px;height: 80px;"></td>
                    <td><input type="button" value="详情" @click="Xin(m.id)"></td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="Fent(1)">
        <input type="button" value="上一页" @click="Fent(2)">
        <input type="button" value="下一页" @click="Fent(3)">
        <input type="button" value="尾页" @click="Fent(4)">
        一共{{ peag.pcount }}页，一共{{ peag.count }}条，每页{{ qag.parsize }}条，当前的{{ qag.pardex }}页
        <select v-model="qag.parsize" @change="setsize">
            <option>2</option>
            <option>4</option>
            <option>6</option>
        </select>
        <input type="text" v-model="qag.pardex">
        <input type="button" value="跳转" @click="setdex">
    </div> 
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const rount=useRouter()

onMounted(() => {
    Show()
})

const Xin=(vid:any)=>{
    rount.push({path:'/XinView',query:{id:vid}});
}

const setdex=()=>{
    if(qag.value.pardex>0&&qag.value.pardex<=peag.value.pcount){
        Show()
    }
}

const setsize=()=>{
    qag.value.pardex=1;
    Show()
}

const Fent=(val:any)=>{
    if(val==1){
        qag.value.pardex=1;
        Show()
    }
    if(val==2){
        if( qag.value.pardex>1){
            qag.value.pardex-=1;
            Show()
        }  
    }
    if(val==3){
        if( qag.value.pardex<peag.value.pcount){
            qag.value.pardex+=1;
            Show()
        }
    }
    if(val==4){
        qag.value.pardex=peag.value.pcount;
        Show()
    }
}

const data=ref([{
  "id": 0,
  "name": "",
  "pwd": "",
  "age": 0,
  "sex": "",
  "img": ""
}])

const qag=ref({
    pardex:1,
    parsize:2,
    name:""
})

const peag=ref({
    count:0,
    pcount:0
})


const Show=()=>{
    axios.get("https://localhost:7087/api/User/Show",{params:qag.value}).then(res=>{
        data.value=res.data.data;
        peag.value.count=res.data.count;
        peag.value.pcount=Math.ceil(res.data.count/qag.value.parsize);
    })
}

</script>

<style scoped>

</style>